<template>
    <div class="rightThree">
        <div class="left">
            <div class="title">实际到位内容</div>
            <div class="children" ref="chartsLeftRef"></div>
        </div>
        <div class="right">
            <div class="title">外商直接投资</div>
            <div class="children" ref="chartsRightRef"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, markRaw, onBeforeUpdate } from 'vue'
import * as echarts from 'echarts';
const props = defineProps({
    info1: Object,
    info2: Object,
})
const chartsLeftRef = ref()
const chartsRightRef = ref()

const state = reactive({
    myCharts: [] as any,
    chartsLeftData: null as any,
    chartsRightData: null as any,
})

const initChartsLeft = () => {
    state.chartsLeftData = markRaw(echarts.init(chartsLeftRef.value));
    var max = 100; //满刻度大小
    const option = {
        color: ['#00aeff', '#00ffc7'],
        tooltip: {
            formatter(params:any) {
                console.log(params)
                return `<span style="color:"#FFF"">${params.seriesName}：${params.value}%</span>`;
            }
        },
        legend: {
            data: props.info1?.names,
            itemWidth: 14,
            padding: [0, 5],
            itemGap: 15,
            itemHeight: 14,
            bottom: '5%',
            textStyle: {
                fontSize: 13,
                color: '#fff'
            }
        },
        series: [
            {
                name: props.info1?.names[0],
                type: 'pie',
                radius: ['30%', '40%'],
                hoverAnimation: false,
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: props.info1?.value2[0],
                        itemStyle: {
                            normal: {
                                color: '#2196F3',
                            },
                        },
                    },
                    {
                        //画剩余的刻度圆环
                        value: max - Number(props.info1?.value2[0],),
                        itemStyle: {
                            normal: {
                                color: '#84E36311',
                            },
                        },
                    },
                ],
            },
            {
                name: props.info1?.names[1],
                type: 'pie',
                radius: ['50%', '60%'],
                hoverAnimation: false,
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: props.info1?.value2[1],
                        itemStyle: {
                            normal: {
                                color: '#69FFE3',
                                borderWidth: '10'
                            },
                        },
                    },
                    {
                        //画剩余的刻度圆环
                        value: max - Number(props.info1?.value2[1],),
                        itemStyle: {
                            normal: {
                                color: '#84E36311',
                                borderWidth: '10'
                            },
                        },
                    },
                ],
            },
        ],
    };

    state.chartsLeftData.setOption(option);
    state.myCharts.push(state.chartsLeftData);
}

const initChartsRight = () => {
    state.chartsLeftData = markRaw(echarts.init(chartsRightRef.value));
    var max = 100; //满刻度大小
    const option = {
        color: ['#00aeff', '#00ffc7'],
        tooltip: {
            formatter(params:any) {
                console.log(params)
                return `<span style="color:"#FFF"">${params.seriesName}：${params.value}%</span>`;
            }
        },
        title: {
            text: props.info2?.total,
            subtext: '新设外资\n企业',
            x: 'center',
            y: 'center',
            textStyle: {
                fontSize: '28',

                fontFamily: 'Source Han Sans CN',
                color: '#fff',
            },
            subtextStyle: {
                color: '#ccc',
                fontSize: 14,
                fontFamily: 'Source Han Sans CN',
                top: 'center'
            },
            itemGap: 6 //主副标题间距
        },
        legend: {
            data: props.info2?.names,
            itemWidth: 14,
            padding: [0, 5],
            itemGap: 15,
            itemHeight: 14,
            bottom: '5%',
            textStyle: {
                fontSize: 13,
                color: '#fff'
            }
        },
        series: [
            {
                name: props.info2?.names[0],
                type: 'pie',
                radius: ['30%', '40%'],
                hoverAnimation: false,
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: props.info2?.values[0],
                        itemStyle: {
                            normal: {
                                color: '#2196F3',
                            },
                        },
                    },
                    {
                        //画剩余的刻度圆环
                        value: max - Number(props.info2?.values[0]),
                        itemStyle: {
                            normal: {
                                color: '#84E36311',
                            },
                        },
                    },
                ],
            },
            {
                name: props.info2?.names[1],
                type: 'pie',
                radius: ['50%', '60%'],
                hoverAnimation: false,
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: props.info2?.values[1],
                        itemStyle: {
                            normal: {
                                color: '#69FFE3',
                                borderWidth: '10'
                            },
                        },
                    },
                    {
                        //画剩余的刻度圆环
                        value: max - Number(props.info2?.values[1]),
                        itemStyle: {
                            normal: {
                                color: '#84E36311',
                                borderWidth: '10'
                            },
                        },
                    },
                ],
            },
        ],
    };

    state.chartsLeftData.setOption(option);
    state.myCharts.push(state.chartsLeftData);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                state.myCharts[i].resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onBeforeUpdate(() => {
    initChartsLeft()
    initChartsRight()
    initEchartsResize()
});
</script>

<style scoped lang="scss">
.rightThree {
    height: calc(100% - 45px);
    display: flex;
    padding: 5px;
    justify-content: space-between;

    .left {
        display: flex;
        flex-direction: column;
        width: 49%;
        flex: 1;

        .title {
            padding-left: 60px;
            padding-top: 20px;
            font-size: 18px;
            color: #AEBBC2;
        }

        .children {
            flex: 1;
        }
    }

    .right {
        display: flex;
        flex-direction: column;
        width: 49%;
        flex: 1;

        .title {
            padding-left: 60px;
            padding-top: 20px;
            color: #AEBBC2;
            font-size: 18px;
        }

        .children {
            flex: 1;
        }
    }
}
</style>